<template>
  <h1>我是父组件</h1>

  <ul>
    <li v-for="i in childRefs?.list" :key="i">
      {{ i }}
    </li>
  </ul>
  <!-- 子组件 ref的值与<script>中的保持一致 -->
  <child-component ref="childRefs"></child-component>

  <button @click="handlerClick">按钮</button>
</template>

<script setup>
import { ref } from 'vue'
import ChildComponent from "./ChildComponent.vue";

const childRefs = ref(null)

const handlerClick = () => {
  console.log(childRefs.value.list)
    console.log(childRefs.value.childName) // 获取子组件对外暴露的属性
    childRefs.value.someMethod() // 调用子组件对外暴露的方法
}
</script>

<style lang="less">
</style>
